﻿@model Film8.Models.Fan

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
    <h4>Fan</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.LikedMovies)
        </dt>
        <dd>
            <table class="table">
                <tr>
                    <th>Movie Title</th>
                    <th>Year</th>
                </tr>
                @foreach (var item in Model.LikedMovies)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Title)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Year)
                        </td>
                    </tr>
                }
            </table>
        </dd>
    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |
    @Html.ActionLink("Back to List", "Index")
</p>
<section id="section-map" class="clearfix">
    <div id="map"></div>
</section>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript">
            // When the window has finished loading create our google map below
            google.maps.event.addDomListener(window, 'load', init);
            var geocoder;
            var map;
            function codeAddress(address) {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var myOptions = {
                                           
                            // How zoomed in you want the map to start at (always required)
                            zoom: 17,

                            // The latitude and longitude to center the map (always required)
                            center: results[0].geometry.location,

                            // How you would like to style the map.
                            // This is where you would paste any style found on Snazzy Maps.
                            styles: [{ featureType: "all", elementType: "all", stylers: [{ invert_lightness: true }, { saturation: 10 }, { lightness: 30 }, { gamma: 0.5 }, { hue: "#2a9fd6" }] }]
                        }
                        map = new google.maps.Map(document.getElementById("map"), myOptions);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                        // create a marker  
                        var marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: 'Latitude: ' + results[0].geometry.location.Ya + ' Longitude :' + results[0].geometry.location.Za
                        });
                    }
                });
            }
            function init() {
                // Basic options for a simple Google Map
                // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
                var mapOptions = {
                    // How zoomed in you want the map to start at (always required)
                    zoom: 17,

                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(codeAddress('@Html.DisplayFor(model => model.Address)')),

                    // How you would like to style the map.
                    // This is where you would paste any style found on Snazzy Maps.
                    styles: [	{		featureType:"all",		elementType:"all",		stylers:[		{			invert_lightness:true		},		{			saturation:10		},		{			lightness:30		},		{			gamma:0.5		},		{			hue:"#2a9fd6"		}		]	}	]
                };

                // Get the HTML DOM element that will contain your map
                // We are using a div with id="map" seen below in the <body>
                var mapElement = document.getElementById('map');

                // Create the Google Map using out element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);
            }
              
</script>